<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 300px;
				height: 200px;
				text-align: center;
				line-height: 30px;
				border-collapse: collapse;
			}
			thead{
				background-color: rgb(0,152,201);
				color: white;
			}
			td ,th{
				border: 1px solid rgb(208,208,208);
				font-size: 14px;
			}
			td{
				color: gray;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="all"></th>
					<th>菜名</th>
					<th>饭店</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>地三鲜</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>西红柿炒鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>醋溜土豆丝</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>萝卜干炒黄豆儿</td>
					<td>田老师</td>
				</tr>
			</tbody>
		</table>
		<script>
			var all = document.getElementById("all");
			var tbody = document.getElementById("tbody");
			var check = tbody.getElementsByTagName("input");
		
			all.onclick=function(){
			if(all.checked){
				for(var i=0;i<check.length;i++){
					check[i].checked=true;
					}
				}else{
					for(var i=0;i<check.length;i++){
					check[i].checked=false;
					}
				}
			}
			for( var i=0;i<check.length;i++){
				check[i].onclick=function(){
					var bool =true;
					for(var j=0;j<check[j];j++){
						if(check[i].checked===false){
							bool=false
						}
					}
					all.checked=bool;
				}
			}

		</script>
	</body>
</html>
